.TestLogin {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;


    &>.SignBox {
        width: 1400px;
        height: 750px;
        overflow: hidden;
        z-index: 1;

        display: flex;
        align-items: center;
        justify-content: center;

        &>.signBack {
            position: absolute;
            z-index: -1;
        }

        &>.Box {
            width: 100%;
            height: 100%;
            padding: 24px 0;
            display: flex;
            align-items: center;
            justify-content: center;

            &>.left {
                flex: 1;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                flex-direction: column;
                background: rgba(0, 0, 0, 0.25);

                &>.title {
                    letter-spacing: 24px;
                    font-family: ShuHeiTi;
                    font-variation-settings: "wght" 100, "ital" 0;
                    text-shadow: none;
                    transition: all 0.5s;
                    color: #ffffff;
                    font-size: 64px;
                    margin-bottom: 16px;
                }
            }

            &>.right {
                width: 0;
                height: 100%;
                opacity: 0;
                background: rgba(0, 0, 0, 0.25);
                backdrop-filter: blur(10px);
                transition: all 0.35s;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                user-select: none;
                overflow: hidden;

                &>.title {
                    letter-spacing: 8px;
                    font-family: ShuHeiTi;
                    font-variation-settings: "wght" 100, "ital" 0;
                    text-shadow: none;
                    color: #ffffff;
                    font-size: 40px;
                    text-transform: uppercase;
                    margin-bottom: 8px;
                }

                &>.switch {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 16px;

                    &>div {
                        padding: 8px 8px 8px 40px;
                        position: relative;
                        z-index: 1;
                        font-size: 20px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #FFFEC6;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 0 8px;
                        cursor: pointer;

                        &::after {
                            position: absolute;
                            content: '';
                            left: 0;
                            top: 0;
                            width: 24px;
                            height: 24px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 50%;
                            cursor: pointer;
                            transition: 0.3s;
                            border: 3px solid transparent;
                            box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),
                                -1px -1px 4px rgba(255, 255, 255, 0.5);
                        }

                        &.active {
                            &::after {
                                box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),
                                    -1px -1px 4px rgba(255, 255, 255, 0.5),
                                    inset 3px 3px 6px rgba(0, 0, 0, 0.5),
                                    inset -1px -1px 4px rgba(255, 255, 255, 0.5);
                                transform: scale(1.1);
                            }
                        }
                    }
                }

                .CodeUpBox,
                .SignUp {
                    height: 300px;

                    &.SignUp {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        padding: 0 56px;

                        .ant-form-item {
                            position: relative;
                            z-index: 1;

                            &::after {
                                position: absolute;
                                left: 0;
                                top: 0;
                                z-index: 1;
                                font-size: 14px;
                                font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
                                font-weight: bold;
                                color: #fffec7;
                            }

                            &:nth-child(1) {
                                &::after {
                                    content: "帐号 :";
                                }
                            }

                            &:nth-child(2) {
                                &::after {
                                    content: "密码 :";
                                }
                            }
                        }

                        .ant-input-affix-wrapper {
                            height: 56px;
                            font-size: 25px;
                            background-color: transparent;
                            color: #fffec7;
                            border: none;
                            position: relative;
                            padding: 4px 25px;
                            border: none;
                            position: relative;
                            margin: 8px 0;

                            &::after {
                                position: absolute;
                                content: "";
                                left: 0;
                                bottom: 0;
                                width: 100%;
                                height: 2px;
                                background: #fffec7;
                            }

                            input {
                                text-indent: 15px;
                                font-size: 20px;
                                background-color: transparent;
                                color: #fffec7;
                            }

                            .ant-input-password-icon.anticon {
                                color: #fffec7;
                            }

                            &:hover,
                            &:focus-within {
                                box-shadow: none;
                            }
                        }


                        .SignUpBtn {

                            button {
                                height: 48px;
                                line-height: 24px;
                                background: linear-gradient(rgba(30, 112, 45, 0.6),
                                        rgba(30, 112, 45, 1));
                                font-size: 26px;
                                font-family: ShuHeiTi;
                                font-weight: bold;
                                color: #ffffff;
                                border-radius: 50px;
                                border: 2px solid #fffec7;
                            }
                        }
                    }
                }

            }

            &:hover {
                &>.left {
                    &>.title {
                        -webkit-text-stroke: 4px #ffffff;
                        font-variation-settings: "wght" 900, "ital" 1;
                        color: transparent;
                        text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #01e647,
                            20px 20px 0px #e9b701, 25px 25px 0px #f40468, 45px 45px 10px #482896;
                    }
                }

                &>.right {
                    width: 400px;
                    opacity: 1;
                }
            }
        }
    }
}